<template>
  <div>
    <edu-table :data="professionalTableData" :order="false" :pagination="false" border :selection="false" :merge='true' :stripe="false" :headerCellStyle="headerCellStyle" v-if="professionalTableData.length">
      <edu-table-column align="center" :label="$t('label.courseCategory')" property="courseCategory" width="150" />
      <edu-table-column align="center" :label="item.column" v-for="(item, index)  in tableColumns" :key='key'>
        <template slot-scope="scope">
          <div v-if="index < scope.row.data.length">
            <div v-if="scope.row.data[index].isSetting">
              <el-input v-model="scope.row.data[index].credit" @change="handleChange(scope.row.data[index])" type="number" min="0" />
            </div>
            <div v-else>
              {{ showGotCredit ?  ((scope.row.data[index].getCredit || 0) + '/' + (scope.row.data[index].credit || 0)) :  (scope.row.data[index].credit || 0) }}
            </div>
          </div>
        </template>
      </edu-table-column>
    </edu-table>
  </div>
</template>
<script>
export default {
  name: 'professionalAuditStandards',
  props: {
    isSetting: {
      type: Boolean,
      default: false
    },
    showGotCredit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      professionalAuditStandards: [],
      professionalTableData: [],
      tableColumns: []
    };
  },
  methods: {
    headerCellStyle() {
      return "background: #f4f7fa";
    },
    init(data) {
      this.professionalAuditStandards = data;
      this.dealWithStandards();
    },
    dealWithStandards() {
      if (!this.professionalAuditStandards || !this.professionalAuditStandards.length) {
        this.professionalTableData = [];
        return;
      }
      const labMap = this.getLabelMap();
      let totalCredit = 0, count = 0, getTotalCredit = 0;
      const columns = [];
      const tableData = this.getTableData();
      Object.keys(labMap).forEach(key => {
        const current = labMap[key];
        if (current.children && current.children.length) {
          let credits = 0;
          let getCredits = 0;
          current.children.forEach(item => {
            columns.push({ column: item.labName, labId: item.labID });
            credits += item.credit;
            getCredits += (item.getCredit || 0);
            count++;
            tableData[0].data.push({
              labId: item.labID,
              credit: item.credit || 0,
              getCredit: item.getCredit,
              isSetting: this.isSetting
            });
          });
          tableData[1].data.push({
            labId: current.self.labID,
            credit: credits,
            getCredit: getCredits,
            isSetting: false
          });
          tableData[1].columnList.push({
            index: tableData[1].columnList.length + 1,
            rowspan: 1,
            colspan: current.children.length
          });
          totalCredit += credits;
          getTotalCredit += getCredits;
        } else {
          columns.push({ column: current.self.labName, labId: current.self.labID });
          totalCredit += current.self.credit;
          count++;
          const value = {
            labId: current.self.labID,
            credit: current.self.credit,
            getCredit: current.self.getCredit || 0,
          };
          tableData[0].data.push({ ...value, isSetting: this.isSetting });
          tableData[1].data.push({ ...value, isSetting: false });
          tableData[1].columnList.push({
            index: tableData[1].columnList.length + 1,
            rowspan: 1,
            colspan: 1
          });
        }
        getTotalCredit += current.self.getCredit;
      });
      tableData[2].data.push({
        labId: 'total',
        credit: totalCredit,
        getCredit: getTotalCredit,
        isSetting: false
      });
      tableData[2].columnList.push({
        index: tableData[2].columnList.length + 1,
        rowspan: 1,
        colspan: count
      });
      this.tableColumns = [...columns];
      this.professionalTableData = [...tableData];
    },
    getLabelMap() {
      const resultMap = {};
      this.professionalAuditStandards.forEach(item => {
        if (item.orderNum === 999) {
          return;
        }
        if (!item.parentLabID) {
          if (!resultMap[item.labID]) {
            resultMap[item.labID] = {
              self: item,
              children: []
            };
          } else {
            resultMap[item.labID].self = item;
          }
        } else {
          if (!resultMap[item.parentLabID]) {
            resultMap[item.parentLabID] = {
              children: [item]
            };
          } else {
            resultMap[item.parentLabID].children.push(item);
          }
        }
      });
      return resultMap;
    },
    getTableData() {
      return [
        {
          courseCategory: '学分要求',
          data: []
        },
        {
          courseCategory: '学分小计',
          data: [],
          columnList: []
        },
        {
          courseCategory: '总学分',
          data: [],
          columnList: []
        }];
    },
    handleChange(data) {
      this.professionalAuditStandards.forEach(item => {
        if (item.labID === data.labId) {
          item.credit = Number(data.credit) < 0 ? 0 : Number(data.credit);
        }
      });
      this.dealWithStandards();
    },
    getProfessionalAuditStandards() {
      const map = {};
      this.professionalTableData.forEach(item => {
        if (item.data && item.data.length) {
          item.data.forEach(lab => {
            lab.labId && (map[lab.labId] = lab.credit);
          });
        }
      });
      this.professionalAuditStandards.forEach(item => {
        if (map[item.labID]) {
          item.credit = Number(map[item.labID]);
        }
      });
      return this.professionalAuditStandards;
    }
  }
};
</script>
<style lang="scss" scoped>
  ::v-deep .cell.el-tooltip {
    width: 100% !important;
  }
</style>
